<template>
	<div>
		<!-- 轮播图 -->
		<div>
			<van-swipe
				class="my-swipe"
				:autoplay="3000"
				indicator-color="white"
			>
				<van-swipe-item
					v-for="item in DetailchartData?.banners[0].split(',')"
					:key="item"
					class="DetailImgBox"
				>
					<img :src="item" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 轮播图结束 -->
		<!-- 商品信息 -->
		<div>
			<div class="commodityPrice">
				<span class="PriceSymbol">￥</span>
				<span class="Price">{{ CommodityCopywriting.originprice }}</span>
			</div>
			<div class="commodityName">
				<p>{{ CommodityCopywriting.proname }}</p>
			</div>
		</div>
		<!-- 商品信息结束 -->
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { useRoute } from "vue-router"

import { getCommodityDetail } from "../services/index"

const route = useRoute()

// 轮播图
const DetailchartData = ref()
// 商品文案
const CommodityCopywriting = ref([])

const CommodityId = route.params.id
// 获取产品的详情数据
onMounted(async () => {
	// 发送获取产品的详情数据的请求
	const result = await getCommodityDetail(CommodityId)
	DetailchartData.value = result.data.data
	CommodityCopywriting.value = result.data.data
	// console.log(result)
})
</script>

<style scoped>
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	/* line-height: 150px; */
	text-align: center;
	/* background-color: #39a9ed; */
}
.my-swipe {
	height: 350px;
}
.DetailImgBox img {
	width: 100%;
	height: 100%;
}
.commodityPrice {
	padding: 20px;
	color: orange;
}
.commodityName p{
	padding: 0 20px;
	font-size: 18px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 25px;
}
.PriceSymbol{
	font-size: 20px;
}
.Price{
	font-size: 28px;
}
</style>
